<%--
  Created by IntelliJ IDEA .
  User: Baggio
  Date: 2017-11-13
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>先锋号</title>
    <%@ include file="/common/include-core.jsp" %>
    <%@ include file="/common/include-web.jsp" %>
    <link rel="stylesheet" href="/static/css/web/pioneer/media/playvoice.css">
    <script src="/static/js/web/pioneer/media/playVoice.js"></script>
</head>
<body>
<jsp:include page="${ctx}/pioneer/head.html"/>
 
<div class="content-title" style="width:1200px; height: 30px; line-height: 30px; font-size: 14px; margin: 0 auto; margin-top: 20px;">当前位置：赛乐网> 红领巾电台> 正文</div>
<div class="content" style="width: 1200px; height: auto; margin: 20px auto 40px;overflow: hidden;background: #fff; ">
    
    
        <div class="voicelistbox">
            <div class="voiceing">
                <div class="voiceimg">
                    <img src="${picPath}/${media.mediaPic}" alt="">
                    <audio src="${media.mediaUrl}" id="bgMusic"/>
                </div>
                
                <div class="voicetitle">
                    <p style="font-size: 18px">${media.mediaName}</p>
                    
                    <%--<div class="evaluateimg">
                        <a href="javascript:void(0);">
                            <img src="/static/images/web/pioneer/media/playvoice/u1750.png" alt="">
                            <img src="/static/images/web/pioneer/media/playvoice/u1750.png" alt="">
                            <img src="/static/images/web/pioneer/media/playvoice/u1750.png" alt="">
                            <img src="/static/images/web/pioneer/media/playvoice/u1750.png" alt="">
                            <img src="/static/images/web/pioneer/media/playvoice/u1750.png" alt="">
                        </a> 
                    </div>--%>


                    <div class="voiceintroduce">
                        <p style="color: #999">介绍：${media.mediaIntro}</p>
                    </div>
                    
                    <%--<div class="play">
                        <span class="playfrequency">播放: <em>${media.amount}次</em></span>
                        <span class="latelyupdata">最近更新: <em>3小时前</em></span>
                    </div>--%>
                    
                    <div class="voiceoption">
                        <input id="playbtn" type="button" value="播放" ></input>
                        <%--<button class="share">分享</button>--%>
                        <%--<a href="${media.mediaUrl}"><button class="download">下载</button></a>--%>
                    </div>
                </div>
            </div>
            

            
            <div class="voiceplaylist">
                <div class="listheader">
                    <h3>专辑列表</h3>
                    <span>共${mediaList.size()}个节目</span>
                </div>
                
                <div class="listcontent">
                    <table>
                        <thead>
                            <tr>
                                <td>节目名</td>
                                <td>时长</td>
                                <td>播放量</td>
                                <td>更新时间</td>
                            </tr>
                        </thead>
                        
                        <tfoot>
                        <c:forEach items="${mediaList}" var="item">
                            <tr>
                                <td>
                                    <span class="spanone"><img src="/static/images/web/pioneer/media/playvoice/u1699.png" alt=""></span>
                                    <span class="spantwo"><img src="/static/images/web/pioneer/media/playvoice/u1701.png" alt=""></span>
                                    <a href="/pioneer/media/playVoice.html?tid=${item.tid}"><span class="spanthree">${item.mediaName}</span></a>
                                </td>
                                <td>${item.duration}</td>
                                <td>${item.amount}次 </td>
                                <td><fmt:formatDate value="${item.createTime}" pattern="yyyy-MM-dd  HH:mm" /></td>
                            </tr>
                        </c:forEach>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="voiceaside" style="float: right; width: 275px; height: auto;overflow: hidden">
            <jsp:include page="${ctx}/pioneer/media/voiceRecommend.html"/>
        </div>

</div>
<jsp:include page="${ctx}/pioneer/media/guessYouLike.html"/>

<jsp:include page="${ctx}/pioneer/foot.html"/>
</body>
</html>
